<template>
	<scroll-view scroll-y="true" class="container_scrollview" :show-scrollbar="false">
		<view class="container">
			<view class="kuang2">
				<view class="tab">
					<view :class="tabshow?'tabson tabshow':'tabson'" @click="tabbtn('jd')">
						门店自提
					</view>
					<view :class="!tabshow?'tabson tabshow':'tabson'" @click="tabbtn('zdf')">
						门店配送
					</view>
				</view>
				<view class="tabbox" v-if="tabshow">
					<view class="title">
						睦月酱奶茶总店
					</view>
					<view class="address">
						门店地址:南京市栖霞区尧化街道100号，报订单号取餐
					</view>
				</view>
				<view class="tabbox" v-else @click="xuanze">
					<block v-if="showDz">
						<view class="title">
							{{dizhi.address}}
						</view>
						<view class="address">
							{{dizhi.consigneeName}} {{dizhi.consigneePhone}}
						</view>
					</block>
					<view class="title" v-else>
						选择收货地址
					</view>
				</view>
			</view>
			<!-- 		<view class="kuang3 fl_ju" v-if="tabshow">
				<view class="yuji">
					预计取餐时间
				</view>
				<view class="time">
					13:45
				</view>
			</view> -->
			<!-- 		<view class="kuang3 fl_ju" v-else>
				<view class="yuji">
					预计送达时间
				</view>
				<view class="time fl_al">
					13:45 <image src="../../static/signImages/right.png" mode=""></image>
				</view>
			</view> -->
			<view class="kuang3">
				<view class="title">
					睦月酱奶茶总店
				</view>
				<view class="fl_ju spson" v-for="item in gwList">
					<view class="flleft fl_al">
						<image :src="item.image" mode=""></image>
						<view class="xinxi">
							<view class="name">
								{{item.productName}}
							</view>
							<view class="shu">
								x{{item.quantity}}
							</view>
						</view>
					</view>
					<view class="flright">
						¥{{ item.price/100}}
					</view>
				</view>
				<view class="fl_ju spson">
					<view class="title">
						商品小计:
					</view>
					<view class="flright">
						¥{{sum/100}}
					</view>
				</view>
				<view class="fl_ju spson">
					<view class="title">
						包装费用:
					</view>
					<view class="flright">
						¥00.00
					</view>
				</view>
				<view class="fl_ju spson">
					<view class="title">
						优惠券:
					</view>
					<view class="tishi">
						暂无可用优惠券
					</view>
				</view>
				<view class="fl_ju spson">
					<view class="title">

					</view>
					<view class="flright">
						<text class="tishi">共1件商品，小计</text>¥{{sum/100}}
					</view>
				</view>
			</view>
			<view class="kuang3 fl_al">
				<view class="yuji">
					备注：
				</view>
				<view class="">
					<u--input placeholder="请输入备注内容" :border="false" v-model="form.remarks" @change="change"></u--input>
				</view>
			</view>
		</view>
		<view class="fl_ju xuanfu">
			<view class="qian">
				¥<text style="font-size: 30rpx;font-weight: 600;">{{sum/100}}</text>
			</view>
			<view class="" style="width: 200rpx;" @click="tijiao">
				<u-button text="提交" color="#005DFF"></u-button>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		shoppingCartList,
		addressList,
		addressInfo,
		orderAdd,
		orderUnifiedorder
	} from '@/api/url.js'
	export default {
		data() {
			return {
				myData: {}, // 初始化接收参数的对象
				tabshow: false,
				showDz: false,
				value: '',
				type: 0,
				sum: 0,
				gwList: [],
				token: uni.getStorageSync("token"),
				form: {
					remarks: '',
					pickupMethod: 0,
					shoppingCartIds: '',
					// actualAmount: 0,
					productQuantity: 0,
					// orderAmount: 0,
					orderStatus: 0,
					isPackaged: 1,
					couponId: '',
					address: '',
					consigneeName: '',
					consigneePhone: '',
				},
				dizhi: {
					address: '',
					consigneeName: '',
					consigneePhone: ''
				}
			};
		},
		onShow() {

		},
		onLoad(options) {
			console.log(options, 'options')
			this.tabshow = options.type == 0 ? true : false
			this.form.pickupMethod = options.type
			this.hwcList()
			if (uni.getStorageSync('address')) {
				this.showDz = true
				this.dizhi = uni.getStorageSync('address')
			}
			// this.address()
		},
		methods: {
			// 微信支付
			zhifu(e) {
				orderUnifiedorder({
					orderId: e
				}, this.token).then(res => {
					console.log(res)
					uni.requestPayment({
						provider: 'wxpay', // 支付方式为微信支付
						timeStamp: res.data.response.timeStamp, // 支付签名时间戳
						nonceStr: res.data.response.nonceStr, // 支付签名随机串
						package: res.data.response.package, // 支付签名包
						signType: 'MD5', // 支付签名方式
						paySign: res.data.response.paySign, // 支付签名
						success: function(res) {
							uni.showToast({
								title: '支付成功~',
								icon: 'success',
								duration: 10000
							})
							setTimeout(function() {
								uni.hideToast()
								uni.switchTab({
									url: '/pages/sold/index'
								})
							}, 1000)
						},
						fail: function(err) {
							console.log('支付失败：', err);
							uni.showToast({
								title: '支付失败',
								icon: 'error',
								duration: 10000
							})
							setTimeout(function() {
								uni.hideToast()
								uni.switchTab({
									url: '/pages/sold/index'
								})
							}, 1000)
						}
					});
				})
			},
			// 提交
			tijiao() {
				console.log(this.form.pickupMethod)
				this.form.address = this.dizhi.address
				this.form.consigneeName = this.dizhi.consigneeName
				this.form.consigneePhone = this.dizhi.consigneePhone
				orderAdd(this.form, this.token).then(res => {
					console.log(res)
					this.zhifu(res.data.orderId)
				})
			},
			// 返回的地址id
			getUser(data) {
				console.log('接收到的参数', data)
				addressInfo({
					id: data.id
				}, this.token).then(res => {
					console.log(res)
					this.showDz = true
					this.dizhi = res.data.data
				})
			},
			// 购物车列表
			hwcList() {
				shoppingCartList(this.token).then(res => {
					console.log(res.data.rows)
					this.gwList = res.data.rows
					this.sum = 0
					this.form.shoppingCartIds = ''
					this.form.productQuantity = 0
					if (res.data.rows == []) {
						this.sum = 0
						return
					}
					for (let i = 0; i < this.gwList.length; i++) {
						this.sum = this.sum + (this.gwList[i].price * this.gwList[i].quantity)
						this.form.shoppingCartIds = this.form.shoppingCartIds + ',' + this.gwList[i].id
						this.form.productQuantity = this.form.productQuantity + this.gwList[i].quantity
					}
					this.form.shoppingCartIds = this.form.shoppingCartIds.substring(1)
					// this.form.actualAmount = this.sum
					// this.form.orderAmount = this.sum
					// this.form.totalAmount = this.sum
					// this.tabbar = res.data.data
				})
			},
			// 地址管理
			// address() {
			// 	var params = {
			// 		pageNum: 1,
			// 		pageSize: 10,
			// 		orderByColumn: "is_default",
			// 		isAsc: "desc",
			// 	}
			// 	addressList(params, this.token).then(res => {
			// 		console.log(res)
			// 		this.list = res.data.rows
			// 	})
			// },
			// 选择收货地址
			xuanze() {
				uni.navigateTo({
					url: '/pages/user/myAddress'
				})
			},
			click(item) {
				console.log('item', item);
			},
			tabbtn(e) {
				if (e == 'jd') {
					this.tabshow = true
					this.form.pickupMethod = 0
				} else {
					this.tabshow = false
					this.form.pickupMethod = 1
				}
			},
		},
	};
</script>

<style lang="scss">
	page {
		padding: 10rpx;
		box-sizing: border-box;
	}

	.xuanfu {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		.qian {
			color: #FF0000;
		}
	}

	.tishi {
		color: #9C9C9C;
		font-size: 24rpx;
	}

	.spson {
		margin: 10rpx 0;
		padding: 10rpx 0;
		box-sizing: border-box;
		border-top: 1px solid #EBEBEB;

		.flleft {
			.name {
				font-weight: 600;
				font-size: 30rpx;
				margin-bottom: 20rpx;
			}

			.shu {
				font-size: 24rpx;
				color: #c5c5c5;
			}

			image {
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;
			}
		}

		.flright {}
	}

	.time {
		color: #9C9C9C;

		image {
			width: 20rpx;
			height: 20rpx;
			margin-left: 10rpx;
		}
	}

	.kuang3 {
		border-radius: 24rpx;
		background-color: #fff;
		padding: 32rpx;
		box-sizing: border-box;
		width: 95%;
		margin: 30rpx auto;
		box-shadow: 5px 5px 10px 1px #EBEBEB;
		position: relative;
	}

	.type {
		color: #FF0000;
		font-size: 30rpx;
	}

	.title {
		color: #090909;
		font-size: 30rpx;
		margin: 15rpx 0;
		font-weight: 600;
		margin-top: 32rpx;
	}

	.address {
		color: #9C9C9C;
		font-size: 30rpx;
	}

	.kuang2 {
		border-radius: 24rpx;
		background-color: #fff;
		padding: 10rpx;
		box-sizing: border-box;
		width: 95%;
		margin: 20rpx auto;
		box-shadow: 5px 5px 10px 1px #EBEBEB;
		position: relative;
	}

	.tab {
		background-color: #F3F3F3;
		display: flex;
		align-items: center;
		text-align: center;
		border-top-left-radius: 32rpx;
		border-top-right-radius: 32rpx;

		.tabson {
			width: 50%;
			font-size: 32rpx;
			color: #333333;
			padding: 22rpx 0;
			box-sizing: border-box;
			font-weight: 600;
			border-top-left-radius: 32rpx;
			border-top-right-radius: 32rpx;
		}

		.tabshow {
			background-color: #fff;
			color: #296CFB;
			font-weight: 600;
			border-top-left-radius: 32rpx;
			border-top-right-radius: 32rpx;
		}

		// .tabfalse {
		// 	border-bottom-left-radius: 32rpx;
		// }
	}

	.tabbox {
		background-color: #fff;
		width: 100%;
		padding: 0rpx 24rpx 32rpx 24rpx;
		box-sizing: border-box;
		border-bottom-left-radius: 32rpx;
		border-bottom-right-radius: 32rpx;
	}
</style>